<template>
  <view id="home">
    <view class="home_head">
    	<view class="home_head_row">
	    	<view v-for="(item,index) in head" v-on:click="menu(index)">
	    		<text v-bind:class="{text_selection:index==current}">{{item.name}}</text>
	    	</view>
	    </view>
    </view>
	<view class="con" v-bind:class="{none_class:0!=current}">
		<view class="con_list" v-for="(item,index) in num">
			<view class="con_head">
				<view class="con_head_1">
					<img class="con_head_img" src="https://upload.mrlou.com/upload/2019-05-28/4570cf241c74c14f4b2cb69465d140b0.jpg_100-100"/>
				</view>
				<view class="con_head_user">
					<view class="con_head_user_name">
						<text class="con_head_user_title">是爱说大话</text>
						<view class="con_head_user_sex"><text class="iconfont icon-woman"></text> <text>24岁</text></view>
					</view>
					<view class="con_head_user_name">
						<text class="con_head_user_time">32分钟之前</text>
					</view>
				</view>
				<view class="con_head_3" @click="popup_click(item)"><text class="iconfont icon-sanjiaojiantoutriangular"></text> </view>
				<view class="clear"></view>
			</view>
			<view class="con_content">
				<view class="con_content_1"><text>文章标题</text></view>
				<view class="con_content_2">首都哈拉是大厦结算，大厦的好看，撒接电话加快速度很快撒谎打卡时间电话卡的话可接受的和卡仕达，卡仕达贺卡收到沙克大厦的。贺卡收到货款，啊设计的哈克傻傻的和卡仕达卡仕达贺卡上觉得哈萨克德哈卡，卡的啥叫回答说空间很大是客户的卡？</view>
			</view>
			<view class="con_address">
				<text class="iconfont icon-weizhi"></text> 
				<text class="con_address_2">小世界</text>
				<text class="con_address_3"> </text>
				<text class="con_address_4">5787次浏览</text>
			</view>
			<view class="con_function">
				<view class="con_function_view" @click="yongbao(item,index)" v-bind:class="{con_color:item.yongbao.state==1}">
					<text class="iconfont icon-baozhen-hui"></text> 
					<text>{{item.yongbao.num}}</text>
				</view>
				<view class="con_function_view" v-bind:class="{con_color:item.huifu.state==1}">
					<text class="iconfont icon-icon_sms"></text> 
					<text>{{item.huifu.num}}回复</text>
				</view>
				<view class="con_function_view" @click="shoucang(item,index)" v-bind:class="{con_color:item.shoucang.state==1}">
					<text class="iconfont icon-guanzhu"></text> 
					<text>{{item.shoucang.num}}</text>
				</view>
			</view>
		</view>
    </view>
	<view class="mask" v-bind:class="{none_class:1==popup}">
    </view>
    <view class="mask" v-bind:class="{none_class:1==screen}">
    </view>
    <view class="popup" v-bind:class="{none_class:1==popup}">
    	<view class="popup_icon">
    		<view>
    			<view>
    				<text class="iconfont icon-jubao"></text>
    				<text>举报</text>
    			</view>
    		</view>
    		<view>
    			<view>
	    			<text class="iconfont icon-fenxiang"></text>
	    			<text>分享</text>
    			</view>
    		</view>
			<view>
				<view>
					<text class="iconfont icon-fenxiang"></text>
					<text>分享</text>
				</view>
			</view>
			
			<view>
				<view>
					<text class="iconfont icon-fenxiang"></text>
					<text>分享</text>
				</view>
			</view>
			<view>
				<view>
					<text class="iconfont icon-fenxiang"></text>
					<text>分享</text>
				</view>
			</view>
			
			<view>
				<view>
					<text class="iconfont icon-fenxiang"></text>
					<text>分享</text>
				</view>
			</view>
			
			<view>
				<view>
					<text class="iconfont icon-fenxiang"></text>
					<text>分享</text>
				</view>
			</view>
    	</view>
    	<view class="popup_cancel" @click="popup_click(1)">
			取消
    	</view>
    </view>
    <view class="popup" v-bind:class="{none_class:1==screen}">
    	<view class="popup_icon">
    		<view>
    			<view v-bind:class="{unlimited:sex==0}" @click="sex_click(0)" >
    				<text class="iconfont icon-buxian"></text>
    				<text>不限</text>
    			</view>
    		</view>
    		<view>
    			<view v-bind:class="{man:sex==1}" @click="sex_click(1)" >
    				<text class="iconfont icon-man"></text>
    				<text>男生</text>
    			</view>
    		</view>
    		<view>
    			<view v-bind:class="{woman:sex==2}" @click="sex_click(2)">
	    			<text class="iconfont icon-woman"></text>
	    			<text>女生</text>
    			</view>
    		</view>
    	</view>
    	<view class="popup_cancel" @click="screen_click()">
			取消
    	</view>
    </view>
    <view v-bind:class="{none_class:1!=current}">最新</view>
    <view v-bind:class="{none_class:2!=current}">最热</view>
  </view>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
    	popup:1,//前景功能1隐藏2不隐藏
    	current:0,//隐藏和显示0印象2不隐藏
    	screen:1,//1是隐藏2是不隐藏
    	sex:0,//0不限1男2女
      	head: [
	      	{
	      		name:"推荐",
	      	},{
	      		name:"最新",
	      	},{
	      		name:"最热",
	      	}
	      ],
	    num:[
	    	{
	    		id:1,
	    		yongbao:{
	    			state:1,
	    			num:34
	    		},
	    		huifu:{
	    			state:2,
	    			num:22
	    		},
	    		shoucang:{
	    			state:2,
	    			num:22
	    		}
	    	},
	    	{
	    		id:2,
	    		yongbao:{
	    			state:1,
	    			num:34
	    		},
	    		huifu:{
	    			state:2,
	    			num:22
	    		},
	    		shoucang:{
	    			state:2,
	    			num:22
	    		}
	    	},
	    	{
	    		id:3,
	    		yongbao:{
	    			state:1,
	    			num:34
	    		},
	    		huifu:{
	    			state:2,
	    			num:22
	    		},
	    		shoucang:{
	    			state:2,
	    			num:22
	    		}
	    	},
	    	{
	    		id:4,
	    		yongbao:{
	    			state:1,
	    			num:34
	    		},
	    		huifu:{
	    			state:2,
	    			num:22
	    		},
	    		shoucang:{
	    			state:2,
	    			num:22
	    		}
	    	},
	    	{
	    		id:5,
	    		yongbao:{
	    			state:1,
	    			num:34
	    		},
	    		huifu:{
	    			state:2,
	    			num:22
	    		},
	    		shoucang:{
	    			state:2,
	    			num:22
	    		}
	    	},
	    	{
	    		id:6,
	    		yongbao:{
	    			state:1,
	    			num:34
	    		},
	    		huifu:{
	    			state:2,
	    			num:22
	    		},
	    		shoucang:{
	    			state:2,
	    			num:22
	    		}
	    	},
	    	{
	    		id:7,
	    		yongbao:{
	    			state:1,
	    			num:34
	    		},
	    		huifu:{
	    			state:2,
	    			num:22
	    		},
	    		shoucang:{
	    			state:2,
	    			num:22
	    		}
	    	},
	    ]
    }
  },
  methods:{
  	menu:function(index){
  		this.current=index;
  	},
  	yongbao:function(item,index){
  		//判断是取消拥抱还是添加拥抱
  		if(item.yongbao.state==1){
  			this.num[index]['yongbao']['state']=2;
  			this.num[index]['yongbao']['num'] = this.num[index]['yongbao']['num']-1;
  		}else{
  			this.num[index]['yongbao']['state']=1;
  			this.num[index]['yongbao']['num'] = this.num[index]['yongbao']['num']+1;
  		}
  	},
  	shoucang:function(item,index){
  		//判断是取消拥抱还是添加拥抱
  		if(item.shoucang.state==1){
  			this.num[index]['shoucang']['state']=2;
  			this.num[index]['shoucang']['num'] = this.num[index]['shoucang']['num']-1;
  		}else{
  			this.num[index]['shoucang']['state']=1;
  			this.num[index]['shoucang']['num'] = this.num[index]['shoucang']['num']+1;
  		}
  	},
  	popup_click:function(item){
  		if(this.popup==1){
  			this.popup=2;
  		}else{
  			this.popup=1;
  		}
  	},
  	screen_click:function(){
  		if(this.screen==1){
  			this.screen=2;
  		}else{
  			this.screen=1;
  		}
  	},
  	sex_click:function(sex){
  		this.sex=sex;
  		if(this.screen==1){
  			this.screen=2;
  		}else{
  			this.screen=1;
  		}
  	}
  }
}
</script>
<style>
	body{width:750upx;}
	#home{width:750upx;}
	#home .home_head{width:750upx;height:80upx;background-color: #aedcae;position: fixed;z-index: 1;;}
	#home .home_head_row{width: 750upx;height:80upx;padding: 0upx;margin: 0upx;align-items: center;justify-content: center;
		    line-height: 80upx;font-size: 20upx; background-color: #aedcae;color: #fff;}
	#home .home_head_row view{width: 33.33333%; margin: 0upx;padding: 0upx;float: left;font-family: unset;font-size:28upx;align-items: center;justify-content: center;}
	#home .home_head_row text{display: inline-block;padding:0 10upx;margin: 0 auto;}
	#home .text_selection{border-bottom: 4upx solid #6c946d;}
	#home .none_class{display:none;}
	.con{width:750upx;margin-top: 80upx; margin-bottom: 60upx;	flex-direction: column;
	justify-content: center;
	align-items: center;background-color: #fff;}
	.con_list{position: relative;overflow: hidden;flex-direction: column;width:710upx;padding: 20upx 20upx 0 20upx;border-bottom: 3upx solid #f7f7f7;}
	.con_head{width:710upx;height: 100upx;}
	.con_head_1{width:105upx;display: flex;align-items: center}
	.con_head_img{height:80upx;width:80upx; border-radius: 50%;align-items: center;}
	.con_head_user{width:576upx;margin-left: 20upx;flex-direction: column; }
	.con_head_user_sex{background-color: #ec8fcf; border-radius: 6upx;font-size: 0.5rem;height:30upx;line-height: 30upx;align-items: center;justify-content: center;margin:auto 12upx;}
	.con_head_user_sex text{display: inline-block; font-size: 20upx; color: #fff;}
	.con_head_user i{color: #fff; font-weight: bold;}
	.con_head_user text{display: inline-block;}
    .con_head_user_title{height: 50upx;line-height: 50upx;}
	.clear{clear:both;}
	.con_head_user_name{width:576upx;font-size: 32upx;font-family: unset;color: #a9a9a9;margin: 0upx;
    height: 50%; line-height: 50upx;}
	.con_head_user_time{font-size: 24upx;font-family: unset;color: #ccc;}
	.con_address{height:50upx;line-height: 50upx;}
	.con_content{width:100%;flex-direction: column;}
	.con_content_1{font-size: 36upx;color: #404040;
    font-weight: bold;margin: 20upx 0;}
    .con_content_2{    color: #585555;
    font-size: 32upx;
    line-height: 50upx;letter-spacing:2upx;}
    .con_address_2{font-size: 24upx;font-family: unset;color: #ccc;}
    .con_address_3{display:inline-block;width: 16upx;color: #000;height: 16upx;background-color: #ccc;    border-radius: 50%; margin:auto 10upx;}
    .con_address_4{
    	font-size: 24upx;font-family: unset;color: #ccc;
    }
    .con_function{height: 80upx;width: 750upx;line-height: 80upx;}
    .con_function_view{ width: 33.3333%;align-items: center;
		justify-content: center; /* float: left; */ color: #ccc;font-size: 28upx;}
	.con_color{color:#8bce8c;}
	.mask{width:100%;height:100%;position: fixed;z-index: 100;background-color: #000;bottom: 0;opacity:0.3;}
    .popup{width:100%;background-color: #fff;position: fixed;bottom:0;;z-index: 100;border-top: 3upx solid #8bce8c;color:#ccc;flex-direction: column;}
    .popup_icon{width: 100%;background-color: #f4f4f4;padding:20upx 0upx;border-bottom: 1upx solid #ccc;flex-direction: row;flex-wrap: wrap;}
    .popup_icon>view{width: 25%;height:160upx;margin: 20upx 0;}
    .popup_icon>view>view{margin:0 auto;height: 160upx;width: 160upx;background-color: #fff;border-radius: 26upx;align-items: center;justify-content: center;}
    .popup_icon>view>view>p{margin:0upx;font-size: 32upx;position:relative;top: 28upx;}
    .popup_icon>view>view>i{font-size: 56upx;position:relative;top: 26upx;font-weight: bold;}
    .popup_cancel{width: 100%;height:110upx;line-height: 110upx;align-items: center;justify-content: center;top: 240upx;    font-size: 20upx;color:#a0a0a0;font-weight: 600;}
    .man{color:#4395FF;}
    .woman{color:#ec8fcf;}
    .unlimited{color:#8bce8c;}
</style>
